import React,{Component} from "react";
import {DetailWrapper} from "./style";
import { connect } from "react-redux";
import * as actionCreators from "./store/actionCreators";
class Detail extends Component{
    render(){
        let { title,content } = this.props;
        return (
            <DetailWrapper>
                <h3 className="title">{title}</h3>
                <div dangerouslySetInnerHTML={{__html:content}}>
                </div>
            </DetailWrapper>
        )
    }
    componentDidMount(){
        // console.log(this.props.match)
        // this.props.getDetail(this.props.match.params.id);


        console.log(this.props.location.search)
        this.props.getDetail(this.props.location.search.split("=")[1]);
    }
}

const mapState = (state)=>{
    return {
        title:state.getIn(["detail","title"]),
        content:state.getIn(["detail","content"]),
    }
}


const mapAction = (dispatch)=>{
    return {
        getDetail(id){
            dispatch(actionCreators.getDetail(id))
        }
    }
}

export default connect(mapState,mapAction)(Detail);